<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-title" content="哔哩轻小说">
    <title>四叶草轻小说-为爱发电</title>
    <link rel="stylesheet" href="../assets/css/sprite.css">
    <link rel="shortcut icon" href="<c:url value='/favicon.ico'/>" type="image/x-icon">
    <script src="../assets/js/jquery-3.3.1.js"></script>
    <script src="../assets/js/index.js" async></script>
    <style>
        .header .btn-group {
            width: 32%;
        }

        .header .btn-tab {
            line-height: 1.375rem;
        }

        .sp-dark-mode .header {
            border-bottom: 1px solid #1c1c1c;
        }

        @media (prefers-color-scheme: dark) {
            .header {
                border-bottom: 1px solid #1c1c1c;
            }
        }

        @media screen and (min-width: 768px) {
            ol.book-ol li {
                width: calc(50% - 6px);
                display: inline-block;
            }

            .book-meta-l {
                width: 80%
            }

            .book-meta-r .red, .book-meta-r .blue {
                display: none
            }

            .trigger-book-comment .book-li:nth-child(3)::after, .book-ol .book-li:nth-child(5)::after {
                border-bottom: none;
            }

            .module-slide-ol {
                white-space: normal;
                padding-bottom: .75rem;
            }

            .module-slide-li {
                width: calc(19% - 5px);
            }

            .module-slide-a {
                width: 5.125rem;
                padding: 0.75rem 1.45rem 0.5rem;
            }

            .module-slide-img {
                height: 7.25rem;
            }

            .book-comment-p {
                min-height: 2.5625rem;
            }
        }

        @media screen and (max-width: 600px) {
            ol.book-ol li {
                width:100%;
                display: block
            }
        }

        #recentlyRead .book-cell {
            margin-left: auto
        }

        @font-face {
            font-family: read;
            font-display: block;
            src: url('/public/font/read.woff2') format('woff2'), url('/public/font/read.ttf') format('truetype');
        }

        #J_themesSwitchBtn {
            font-family: "read" !important;
        }

        .header-operate {
            white-space: nowrap; /* 不换行 */
            width: 160px; /* 设置宽度 */
        }

        .scrolling-text {
            display: inline-block;
            animation: scroll 8s linear infinite; /* 设置滚动动画 */
        }

        @keyframes scroll {
            0% {
                transform: translateX(100%); /* 从右侧开始 */
            }
            100% {
                transform: translateX(-100%); /* 滚动到左侧 */
            }
        }
    </style>
</head>
<body class="night">
<div class="page page-home">
    <div class="content">
        <header id="header" class="header header-index">
            <a href="../info/loginend.jsp" class="logo-a">
                <h1 class="logo">哔哩轻小说</h1>
            </a>
            <nav class="btn-group">
                <a href="../info/loginend.jsp" class="btn-tab active">轻小说</a>
                <a href="<c:url value='/info/info.jsp'/>" class="btn-tab">个人主页</a>
            </nav>
            <div class="header-operate red">
                <a href="<c:url value='/info/info.jsp'/>" class="icon icon-regs">
                    <span class="scrolling-text">
                        <c:out value="${sessionScope.nickname}" />
                    </span> <!-- 从session中获取昵称 -->
                </a>
            </div>
        </header>
        <!-- 页面内容 S -->
        <div class="white-content">
            <!-- 首页banner位 S -->
            <div id="slideContainer" class="slide-container">
                <ul id="slideUl" class="slide-ul">
                    <li class="slide-li" data-index="1">
                        <a href="../novel/shiroseijyo.html" class="slide-a">
                            <img src="../assets/images/banner01.jpg" class="slide-img" alt="无论是饮酒还是和前辈女友的甜蜜同居恋爱喜剧都要从20岁之后才能开始">
                        </a>
                    </li>
                    <li class="slide-li" data-index="2">
                        <a href="../novel/tenshisama.html" class="slide-a">
                            <img src="../assets/images/banner02.jpg" class="slide-img" alt="在男性禁入的游戏世界里，我唯一该做的事情 我转生成了夹在百合之间的男人">
                        </a>
                    </li>
                    <li class="slide-li" data-index="3">
                        <a href="../novel/furiren.html" class="slide-a">
                            <img src="../assets/images/banner03.jpg" class="slide-img" alt="不想工作的我让成为偶像的青梅竹马们养我一辈子，然而想养我的女孩子却一个接一个地出现">
                        </a>
                    </li>
                    <li class="slide-li" data-index="4">
                        <a href="../novel/fuyukawakagari.html" class="slide-a">
                            <img src="../assets/images/banner04.jpg" class="slide-img" alt="葬送的芙莉莲 ～前奏～">
                        </a>
                    </li>
                </ul>
                <div id="slideDot" class="slide-dot-x">
                    <i class="slide-dot active"></i>
                    <i class="slide-dot"></i>
                    <i class="slide-dot"></i>
                    <i class="slide-dot"></i>
                </div>
            </div>
            <!-- 首页banner位 E -->
            <!-- 搜书 S -->
            <a href="<c:url value='/search/'/>" class="search-guide">
                <svg class="icon icon-find">
                    <use xlink:href="#icon-find"></use>
                </svg>
                <span id="quote">搜索</span>
            </a>
            <!-- 搜书 E -->
        </div>
    </div>
</div>
</body>
</html>